import { Col, Form, Input, Modal, Row, Table } from 'antd'
import { connect } from 'dva'
import React, { Component } from 'react'
import styles from './styles.less'

function mapStateToProps({ campusReductionModel }) {
  return {
    campusReductionModel: campusReductionModel,
  }
}
@connect(mapStateToProps)
export default class Details extends Component {
  constructor(props) {
    super(props)
    this.state = {
      reductionAll: null,
      reductionData: [],
    }
    this.columns = [
      {
        title: '来源/用途',
        dataIndex: 'sourceUse',
        key: 'sourceUse',
        align: 'center',
      },
      {
        title: '减排量(g)',
        dataIndex: 'carbonValue',
        key: 'carbonValue',
        align: 'center',
      },
      {
        title: '获取时间',
        dataIndex: 'createDate',
        key: 'createDate',
        align: 'center',
      },
    ]
  }

  componentDidMount() {
    this.getDetails()
  }

  componentWillUnmount() {}

  //下拉框筛选条件
  handleChange = () => {}

  //时间筛选条件
  timeOnChange = () => {}

  //查询员工减排明细
  getDetails = () => {
    let { modelData } = this.props
    this.props.dispatch({
      type: 'campusReductionModel/getDetails',
      payload: {
        params: {
          phone: modelData.phone,
          page: 1,
          limit: 100,
        },
        callback: (item) => {
          this.setState({
            reductionData: item.list,
            reductionAll: item.carbonTotal,
          })
        },
      },
    })
  }

  render() {
    let { modelOpen, modelData } = this.props
    let { reductionAll, reductionData } = this.state
    return (
      <React.Fragment>
        <Modal
          title="详情"
          centered
          onCancel={() => this.props.onCancel()}
          width={900}
          destroyOnClose={true}
          footer={null}
          open={modelOpen}
          style={{ height: 630, overflow: 'scroll' }}>
          <div className={styles.title}>用户信息</div>
          <div className={styles.cont}>
            <img src={modelData?.avatar} />
            <div>{modelData?.nickName}</div>
          </div>
          <Form
            name="basic"
            labelCol={{
              span: 5,
            }}
            wrapperCol={{
              span: 19,
            }}
            disabled={true}
            initialValues={{
              name: modelData?.name,
              address: modelData?.departmentName,
              useNumber: modelData?.identityCard,
              campusName: modelData?.campusName,
              phone: modelData?.phone,
              sex: modelData?.sex === 0 ? '男' : '女',
              joinTime: modelData?.joinTime,
              loginDate: modelData?.loginDate,
            }}>
            <Row align="middle">
              <Col span={12} push={0}>
                <Form.Item label="姓名" name="name">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12} push={0}>
                <Form.Item label="所属学校" name="campusName">
                  <Input />
                </Form.Item>
              </Col>
              {/* <Col span={12} push={0}>
                                <Form.Item
                                    label="身份证号"
                                    name="useNumber"
                                >
                                    <Input />
                                </Form.Item>
                            </Col> */}
              <Col span={12} push={0}>
                <Form.Item label="所属院校" name="address">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12} push={0}>
                <Form.Item label="手机号" name="phone">
                  <Input />
                </Form.Item>
              </Col>
              {/* <Col span={12} push={0}>
                                <Form.Item
                                    label="性别"
                                    name="sex"
                                >
                                    <Input />
                                </Form.Item>
                            </Col> */}
              <Col span={12} push={0}>
                <Form.Item label="加入时间" name="joinTime">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12} push={0}>
                <Form.Item label="上次登录时间" name="loginDate">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div className={styles.title}>减排明细</div>
          <div className={styles.reductionAll}>累计减排量：{reductionAll}g</div>
          <Table
            // scroll={{ y: 'calc(100vh - 280px)' }}
            pagination={false}
            columns={this.columns}
            dataSource={reductionData}
          />
        </Modal>
      </React.Fragment>
    )
  }
}
